<!DOCTYPE html>
<html>
<head>
    <title>image viewer demo</title>
    
    <link type="text/css" href="jquery/css/base/jquery.ui.all.css" media="all" rel="stylesheet"/>
    <script type="text/javascript" src="jquery/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
    
    <script type="text/javascript" src="js/wz_jsgraphics.js"></script>
    
    <link rel="stylesheet" href="imageViewer.css" type="text/css"  media="all" />
    <script type="text/javascript" src="imageViewer.js"></script>
</head>
<body>
    
    <h1>Image Viewer Demo</h1>
    
    <h3>Plain Image Viewer</h3>
    <p>This is the image viewer with minimum configuration.</p>
    <div id="imageViewer1"></div>
    
    <script type="text/javascript">
    $("#imageViewer1").imageViewer({
        'imageUrl' : 'test/image1.jpg',
        'lang' : 'en',
        'width' : 700,
        'height' : 500,
        'originalSize' : true
    });
    </script>
    
    <h3>Film Strip</h3>
    <p>This is the image viewer with film strip.</p>
    <div id="imageViewer2"></div>
    
    <script type="text/javascript">
    $("#imageViewer2").imageViewer({
        'imageUrl' : 'test/image2.jpg',
        'lang' : 'en',
        'width' : 700,
        'height' : 500,
        'originalSize' : true,
        'filmStripActive' : true,
        'filmStripThumbs' : ['test/small/image1.jpg','test/small/image2.jpg','test/small/image3.jpg','test/small/image4.jpg','test/small/image5.jpg','test/small/image6.jpg'],
        'filmStripImages' : ['test/image1.jpg','test/image2.jpg','test/image3.jpg','test/image4.jpg','test/image5.jpg','test/image6.jpg']
    });
    </script>
    
    <h3>Dia Show &amp; Extra Buttons</h3>
    <p>This is the image viewer with film strip, dia show and next previous buttons. The film strip is set to vertical</p>
    <div id="imageViewer3"></div>
    
    <script type="text/javascript">
    $("#imageViewer3").imageViewer({
        'imageUrl' : 'test/image3.jpg',
        'lang' : 'en',
        'width' : 700,
        'height' : 500,
        'originalSize' : true,
        'enableDiaShow' : true,
        'enableNextPrevious' : true,
        'filmStripActive' : true,
        'filmStripVertical' : true,
        'filmStripThumbs' : ['test/small/image1.jpg','test/small/image2.jpg','test/small/image3.jpg','test/small/image4.jpg','test/small/image5.jpg','test/small/image6.jpg'],
        'filmStripImages' : ['test/image1.jpg','test/image2.jpg','test/image3.jpg','test/image4.jpg','test/image5.jpg','test/image6.jpg']
    });
    </script>
    
    <h3>Lazy Loading Image Viewer</h3>
    <p>This is the image viewer with film strip lazy loading. This can be used to get the images per ajax in case of a verry large collection of images.</p>
    <div id="imageViewer4"></div>
    
    <script type="text/javascript">
    function getThumbsRangeCallback(startIndex,endIndex) {
        var thumbs = ['test/small/image1.jpg','test/small/image2.jpg','test/small/image3.jpg','test/small/image4.jpg','test/small/image5.jpg','test/small/image6.jpg'];
        $("#imageViewer4").imageViewer("updateFilmStripThumbCache",thumbs);
    }
    function getImageCallback(index) {
        var images = ['test/image1.jpg','test/image2.jpg','test/image3.jpg','test/image4.jpg','test/image5.jpg','test/image6.jpg'];
        $("#imageViewer4").imageViewer("changeImage",images[index]);
    }
    function dummySelectionListener(index) {
    }
    $("#imageViewer4").imageViewer({
        'imageUrl' : 'test/image4.jpg',
        'lang' : 'en',
        'width' : 700,
        'height' : 500,
        'originalSize' : true,
        'enableDiaShow' : true,
        'enableNextPrevious' : true,
        'filmStripActive' : true,
        'filmStripLength' : 4,
        'getThumbsRangeCallback' : getThumbsRangeCallback,
        'getImageCallback' : getImageCallback
    });
    </script>
    
</body>
</html>
